import type { FC, PropsWithChildren } from 'react'
import { getRgb, initvalue } from '../../../common/utils'
import { context } from '../../../common/context'

const Title: FC<PropsWithChildren<any>> = ({ children, name, ...props }) => {
  const { resume: { customization, content }, fontScale } = context

  const { applyAccentColor, colors, title, spacing } = customization
  const { fontSize } = spacing
  const item = name ? content[name] : null
  const { titleBkg } = title || {}
  const styles: any = {
    fontWeight: 'bold',
    fontSize: `${((fontSize || 0) * 0.5 + initvalue.fontSize) * fontScale + 0.5}pt`
  }
  if (applyAccentColor?.includes('headings')) {
    styles.color = getRgb(colors.strong.accentColor)
  }
  if (titleBkg) {
    styles.background = getRgb(titleBkg)
  }

  return <td style={{ ...styles, padding: 0 }} {...props}>
    {
      children || item?.displayName || null
    }
  </td>
}
export default Title
